<template>
  <div class="Wedding">
    <el-button type="primary" @click="addHandle" class="btn">添加公司</el-button
    ><br />
    <div class="ipt-select">
      <el-select
        class="ipt"
        v-model="value1"
        multiple
        placeholder="公司名称(可不填)"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select class="ipt" v-model="value1" multiple placeholder="账号状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        multiple
        collapse-tags
        class="ipt"
        placeholder="订单量降序排列"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" class="search">搜索</el-button>
    </div>

    <el-table :data="tableData" border style="left: 120px">
      <el-table-column prop="coder" label="编号" width="50"> </el-table-column>
      <el-table-column prop="company" label="公司名称" width="140">
      </el-table-column>
      <el-table-column prop="ceo" label="法人" width="80"> </el-table-column>
      <el-table-column prop="managerPhone" label="手机号" width="100">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="140"> </el-table-column>
      <el-table-column prop="time" label="开通时间" width="100">
      </el-table-column>
      <el-table-column prop="order" label="订单量" width="80">
      </el-table-column>
      <el-table-column prop="accountBalance" label="账号状态" width="50">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)"
            >策划师列表</el-button
          >
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)"
            >禁用账号</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="Host-insert">
      <!-- 添加 -->
      <el-dialog
        title="添加公司"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="公司名称" prop="name">
              <el-input
                type="text"
                v-model="ruleForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="法人姓名" prop="username">
              <el-input
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="surepassword">
              <el-input
                type="password"
                v-model="ruleForm.surepassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                type="text"
                v-model="ruleForm.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="text"
                v-model="ruleForm.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">返回</el-button>
            </el-form-item>
          </el-form>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from "../../../api";

export default {
  name: "Wedding",
  data() {
    return {
      ruleForm: {
        id:"",
        name: "",
        username: "",
        password: "",
        surepassword: "",
        phone: "",
        email: "",
      },
      dialogVisible: false,
      addOrupdate: "",
      input: "",
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "正常",
        },
        {
          value: "选项3",
          label: "未审核",
        },
        {
          value: "选项4",
          label: "禁用",
        },
      ],
      value1: "",
      options2: [
        {
          value: "选项1",
          label: "订单量降序排列",
        },
        {
          value: "选项2",
          label: "订单量升序排列",
        },
      ],
      value2: "",
      tableData: [],
    };
  },
  mounted() {
    api.getSearchWedding({ search: "" }).then((res) => {
      console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].starttime = new Date();
        var time = res.data[i].starttime.toLocaleDateString();
        this.tableData.push({
          coder: res.data[i].cid,
          company: res.data[i].cname,
          ceo: res.data[i].ceo,
          managerPhone: res.data[i].cphone,
          email: res.data[i].cmail,
          time: time,
          order: res.data[i].cnum,
          accountBalance: res.data[i].status,
        });
      }
    });
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //添加公司提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var date = new Date();
          var toDate = date.toLocaleDateString();
          if (this.addOrupdate == 1) {
            console.log("添加公司");
            api
              .getInsertWedding({
                
                name: this.ruleForm.name,
                username: this.ruleForm.username,
                password: this.ruleForm.password,
                surepassword: this.ruleForm.surepassword,
                phone: this.ruleForm.phone,
                email: this.ruleForm.email,
                status: "正常",
                order: 18,
                time: toDate,
              })
              .then((res) => {
                console.log(res.data);
              });
            alert("公司添加成功");
            this.dialogVisible = false;
          }
          if (this.addOrupdate == 2) {
            console.log("编辑公司");
            api
              .getUpdateWedding({
                id:this.ruleForm.id,
                name: this.ruleForm.name,
                username: this.ruleForm.username,
                password: this.ruleForm.password,
                surepassword: this.ruleForm.surepassword,
                phone: this.ruleForm.phone, 
                email: this.ruleForm.email,
                status: "正常",
                order: 18,
                time: toDate,
              })
              .then((res) => {
                console.log(res.data);
              });
            alert("公司信息修改成功");
            this.dialogVisible = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    //点击添加公司
    addHandle() {
      this.addOrupdate = 1;
      this.dialogVisible = true;
    },
    //点击编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleForm.id = row.coder;
      this.addOrupdate = 2;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.btn {
  margin-right: 670px;
  margin-bottom: 20px;
}
.ipt-select {
  width: 1000px;
  padding: 10px;
}
.search {
  margin-left: 20px;
}
.ipt {
  margin-left: 20px;
}
</style>